<!--搜索布局-->
<template>
  <el-dialog
    :title="title"
    v-model="visible"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :style="{height: height}"
    :modal="modal"
    :fullscreen="fullscreen"
    lock-scroll
    :append-to-body="true"
    destroy-on-close
    :top="top"
    :custom-class="customClass"
    @open="handleOpen"
    @close="handleClose"
  >
    <template #header>
      <slot name="header" />
      <el-divider v-if="hasHeadDivider" border-style="dashed" />
    </template>
    <slot/>
    <template #footer>
      <el-divider v-if="hasFooterDivider" border-style="dashed" />
      <slot name="footer"/>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, toRefs } from 'vue';

// dialog对话框接口
interface ProDialogProps<T = any> {
  title?: string,                     // 对话框标题
  closeOnClickModal?: boolean,        // 点击遮罩层是否允许关闭
  closeOnPressEscape?: boolean,       // 按下ESC是否允许关闭
  showClose?: boolean,                // 是否显示关闭按钮
  width?: string,                     // 宽度
  fullscreen?: boolean,               // 是否全屏显示
  top?: string,                       // 距离顶部高度
  visible: boolean,                   // 控制对话框显隐
  height?: string,                    // 高度
  modal?: boolean,                    // 是否有模态框
  customClass?: string,               // 自定义样式类名
  hasHeadDivider?: boolean,           // 是否显示头部分割线
  hasFooterDivider?: boolean          // 是否显示尾部分割线
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProDialogProps>(), {
  title: '',
  closeOnClickModal: false,
  closeOnPressEscape: true,
  showClose: true,
  width: '70%',
  fullscreen: false,
  top: '15vh',
  visible: false,
  height: 'auto',
  modal: true,
  customClass: '',
  hasHeadDivider: false,
  hasFooterDivider: false
});

const { visible } = toRefs(props);

const visibleSync = computed(() => {
  return props.visible;
})

/**
 * defineEmits emit给父组件
 */
interface EmitEvent {
  (e: "handleOpen"): void;
  (e: "handleClose"): void;
}
const emit = defineEmits<EmitEvent>();
const handleOpen = () => {
  emit("handleOpen");
};
const handleClose = () => {
  emit("handleClose");
};

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  //.el-dialog__wrapper {
  //  z-index: 1003 !important;
  //}
</style>
